<template>
	<view>
		<u-navbar title="个人信息" :autoBack="true" placeholder>
		</u-navbar>
		<view class="p8">
			<view class="bg-fff br-8 px-20 py-8">
				<view class="flex-align py-8">
					<view class="fw-500 fs-14 lh-2 color-333 flex-1">头像</view>
					<view class="header-image me-8">
						<image :src="avatar" mode="aspectFill"></image>
						<button open-type="chooseAvatar" @chooseavatar="chooseavatar" />
					</view>
					<u-icon name="arrow-right" color="#D2D0CE" size="14"></u-icon>
				</view>
			</view>
			<view class="bg-fff br-8 px-20 py-8 mt-4" @click="toPassword">
				<view class="flex-align py-8">
					<view class="fw-500 fs-14 lh-2 color-333 flex-1">修改密码</view>
					<u-icon name="arrow-right" color="#D2D0CE" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view class="py-24 px-8">
			<u-button text="退出登录" @click="$u.debounce(submit,500,true)"
				customStyle="background-color: #fff;color:#FF0000;border:none;border-radius: 16rpx;height:96rpx;"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '', //头像
			}
		},
		onLoad() {
			this.getCompanionInfo();
		},
		methods: {
			changeInfo() {
				this.$api.post({
					url: '/companion/updateInfo/avatar',
					data: {
						avatar: this.avatar
					},
					success: res => {
						console.log('修改成功');
						uni.navigateBack();
					}
				})
			},
			getCompanionInfo() {
				this.loading = true;
				this.$api.get({
					url: '/companion/updateInfo/info',
					success: (res) => {
						console.log('个人信息', res)
						this.avatar = res.avatar;
					}
				});
			},
			toPassword() {
				uni.navigateTo({
					url: '/pages/mine/password'
				})
			},
			chooseavatar(v) {
				console.log(v)
				uni.uploadFile({
					url: this.$allConfig.uploadUrl,
					filePath: v.detail.avatarUrl,
					name: 'file',
					header: {
						'authorization': uni.getStorageSync("userInfo").token
					},
					success: (r) => {
						console.log('头像上传', r)
						this.avatar = JSON.parse(r.data).data.url;
						this.changeInfo();
					},
					fail: err => {
						this.$f.msg('选择头像失败，请重试');
					}
				});
			},
			submit() {
				// 调用退出登录接口
				this.$api.post({
					url: '/companion/login/logout',
					loadingTip: '退出中...',
					success: (res) => {
						console.log('退出登录接口响应:', res);
						// 清除本地缓存的token
						uni.removeStorageSync("userInfo");
						// 显示成功提示
						uni.showToast({
							title: '退出成功',
							icon: 'success',
							duration: 1500
						});
						// 延迟跳转到首页，确保toast显示完成
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/home/home`
							});
						}, 1500);
					},
					fail: (err) => {
						console.error('退出登录失败:', err);
						// 即使接口调用失败，也清除本地缓存
						uni.removeStorageSync("userInfo");
						uni.showToast({
							title: '退出成功',
							icon: 'success',
							duration: 1500
						});
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/home/home`
							});
						}, 1500);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.header-image {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		button {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 50%;
			opacity: 0;
		}
	}
</style>